<script setup>
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SetUp,
  SwitchButton,
  CaretBottom,
  Menu as IconMenu,
  MoreFilled,
  Setting,
  Sunny,
  ShoppingCart,
  Flag,
  MilkTea,
  Document,
} from "@element-plus/icons-vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import avatar from "@/assets/default.png";
import { userInfoService } from "@/api/user.js";
import { useUserInfoStore } from "@/stores/userInfo.js";
import { useTokenStore } from "@/stores/token.js";
import axios from "axios";

//Element样式控制
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};

// 日历
const value = ref(new Date()); // 绑定日历选择的日期

//必要数据存储
const userInfoStore = useUserInfoStore();
const tokenStore = useTokenStore();
const router = useRouter();

//获取用户详情
const getUserInfo = async () => {
  let result = await userInfoService();
  userInfoStore.setInfo(result.data);
};
getUserInfo();

//判断是否为管理员
const isadmin = userInfoStore.info.role === 0;

//====================================/*/根据小头像菜单触发事件路由/*\=========================================
const handleCommand = (command) => {
  if (command === "logout") {
    ElMessageBox.confirm("你确定要退出登录吗？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "提示",
    })
      .then(async () => {
        ElMessage.warning("已退出登录");
        //清空pinia中存储的数据
        tokenStore.removeToken();
        userInfoStore.removeInfo();
        router.push("/login");
      })
      .catch(() => {
        ElMessage.warning({
          type: "info",
          message: "取消退出登录",
        });
      });
  } else {
    router.push("/user/" + command);
  }
};
</script>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<template>
  <el-container class="layout-container">
    <!-- --------------==========-----------左侧菜单栏------------=============--------- -->
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item index="/LoveWall">
            <el-icon><Promotion /></el-icon>
            <span>表白墙</span>
          </el-menu-item>
          <el-menu-item index="/FleaMarket">
            <el-icon><ShoppingCart /></el-icon>
            <span>跳蚤市场</span>
          </el-menu-item>
          <el-menu-item index="/Recruit">
            <el-icon><Flag /></el-icon>
            <span>招募</span>
          </el-menu-item>
          <!-- <el-menu-item index="/FindPartner">
            <el-icon><MilkTea /></el-icon>
            <span>找搭子</span>
          </el-menu-item> -->
          <el-sub-menu index="postManage">
            <template #title>
              <el-icon><Document /></el-icon>
              <span>帖子管理</span>
            </template>
            <el-menu-item index="/MakePost">
              <el-icon><Sunny /></el-icon>
              <span>发布帖子</span>
            </el-menu-item>
            <el-menu-item index="/PostManage" v-if="true">
              <el-icon><MoreFilled /></el-icon>
              <span>管理</span>
            </el-menu-item>
            <el-menu-item index="/Audit" v-if="isadmin">
              <el-icon><SetUp /></el-icon>
              <span>超级管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="userCenter">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item index="/user/profile">
              <el-icon>
                <User />
              </el-icon>
              <span>个人信息</span>
            </el-menu-item>
            <el-menu-item index="/user/changeavatar">
              <el-icon>
                <Crop />
              </el-icon>
              <span>更换头像</span>
            </el-menu-item>
            <el-menu-item index="/user/resetpassword">
              <el-icon>
                <EditPen />
              </el-icon>
              <span>重置密码</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
    <!-- -----------==========------------/*\右侧主区域/*\---------==============------ -->
    <el-container>
      <!-- ---------------------------------头部区域-------------------------------- -->
      <el-header>
        <div>
          无敌牛逼的 <strong>{{ userInfoStore.info.username }}</strong> ，欢迎来到表白墙^_^~
        </div>

        <!-- 头像菜单栏 -->
        <el-dropdown placement="bottom-end" @command="handleCommand">
          <span class="el-dropdown__box">
            <el-avatar
              :src="
                userInfoStore.info.avatar
                  ? userInfoStore.info.avatar
                  : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
              "
            />

            <el-icon>
              <CaretBottom />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile" :icon="User"
                >基本资料</el-dropdown-item
              >
              <el-dropdown-item command="changeavatar" :icon="Crop"
                >更换头像</el-dropdown-item
              >
              <el-dropdown-item command="resetpassword" :icon="EditPen"
                >重置密码</el-dropdown-item
              >
              <el-dropdown-item command="logout" :icon="SwitchButton"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <!-- -----------------------------------主区域----------------------------------- -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<!-- ================================================================================================== -->
<!-- **************************************************************************************************** -->
<!-- ================================================================================================== -->

<style lang="scss" scoped>
.layout-container {
  height: 100vh;

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}

.demo-type > div {
  flex: 1;
  text-align: center;
}

//左侧菜单样式
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  min-height: 100%;
}
</style>